<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:10px;}
        img{width:100px;}
    </style>
</head>
<body>
    
</body>
<script>
    
    // div内放div或图片

    // 动态添加或删除边框

    // 这是组合器
    // 枝对象
    function Team(id){
        this.ele = document.createElement("div");
        this.ele.id = id;
        this.children = [];

        this.add = function(child){
            this.children.push(child);
            this.ele.appendChild(child.ele);
        }
        this.remove = function(child){
            let i=0;
            this.children.some((val, idx)=>{
                i = idx;
                return val === child;
            })
            this.children.splice(i, 1);

            child.ele.remove();
        }
        this.addBorder = function(){
            this.ele.style.border = "solid 2px black";
            this.children && this.children.forEach(val=>{
                val.addBorder();
            })
        }
        this.removeBorder = function(){
            this.ele.style.border = "";
            this.children && this.children.forEach(val=>{
                val.removeBorder();
            })
        }
    }

    // 叶对象
    function Item(src){
        this.ele = document.createElement("img");
        this.ele.src = src;

        this.add = function(){}
        this.remove = function(){}
        this.addBorder = function(){
            this.ele.style.border = "solid 4px red";
        }
        this.removeBorder = function(){
            this.ele.style.border = "";
        }
    }

    // 根据组合器创建实例对象
    const box = new Team("box");
    const xbox1 = new Team("xbox1");
    const xbox2 = new Team("xbox2");
    const msg = new Team("msg");

    const img1 = new Item("./imgs/1.jpg");
    const img2 = new Item("./imgs/2.jpg");
    const img3 = new Item("./imgs/3.jpg");
    const img4 = new Item("./imgs/4.jpg");

    document.body.appendChild(box.ele);

    // 组合实例对象
    box.add(xbox1);

    box.add(xbox2);

    xbox1.add(msg);

    box.add(img1);

    xbox1.add(img2);

    xbox2.add(img3);

    msg.add(img4);

    // 通过实例对象，测试批处理
    box.addBorder();

    // xbox2.addBorder();

    // xbox1.addBorder();

    // xbox2.removeBorder();

    xbox1.removeBorder();

    img4.addBorder();






</script>
</html>